import React, { useEffect, useState} from 'react';
import { connect } from 'react-redux';
// import store from '../redux/store';
import {useNavigate} from 'react-router-dom';
import getCinemaListAction from '../redux/ActionCreator/getCinemaListAction';
function Cinemas(props){
    const navigate = useNavigate()
    // const [cityName,setcityName] =useState(store.getState().CityReducer.cityName)
    // const [cinemaList,setCinemaList] =useState(store.getState().CinemaListReducer.list)
    useEffect(()=>{
        if(props.list.length==0){
            //说明数据为空,就请求后台数据
            // actionCreator里写异步
            // store.dispatch(getCinemaListAction())
            props.getCinemaListAction()
        }else{
            // 拿缓存的数据
            console.log("拿数据")
        }
        //订阅
        // let fh=store.subscribe(()=>{
        //     console.log("cinemas订阅拿到的数据:",store.getState().CinemaListReducer.list)
        //     setCinemaList(store.getState().CinemaListReducer.list)
        // })
        // return ()=>{
        //     //取消订阅
        //     fh();
        // }
    },[props.list,props.getCinemaListAction])
    return (
        <div>
            <div style={{overflow:"hidden"}}>
            <div  onClick={()=>{
                navigate('/city')
            }}>{props.cityName}</div>
            </div>
            <div style={{float:"right"}} onClick={()=>{
                navigate('/Cinemas/search')
            }}>搜索</div>
            <ol>
                {
                    props.list.map(item=>{
                      return <li key={item.cinemaId}>{item.cinemaId}----{item.name}</li>
                    })
                }
            </ol>
        </div>
    );
}
const mapStateToProps=(state)=>{
    return{
        list:state.CinemaListReducer.list,
        cityName:state.CityReducer.cityName
    }
}
const mapDispatchToProps={
    getCinemaListAction
}
export default connect(mapStateToProps,mapDispatchToProps)(Cinemas)